<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<script type="text/javascript" src="js/jquery.itextclear.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
    });
</script>
<!-- jQplot CSS -->

<link rel="stylesheet" media="screen" href="CSS/Tree.css" />
<!-- jQplot CSS END -->

<!-- DATATABLES CSS -->
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css" />
<script type="text/javascript" src="lib/datatables/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/Tree.js"></script>
<!-- DATATABLES CSS END -->

<h1 class="page-title">考核指标设定-${createPageTitle}</h1>
<div class="container_12 clearfix leading">

<div class="tabs side grid_12 leading">

<form id="post_form" name="post_form" action="${ctx}/exam/base_config_create.xhtml">
<div class="grid_12">
    <s:if test="#request.batchType == 'create' or #request.batchType == 'edit'">
    <p> <h5>设定岗位：<strong>多个岗位</strong></h5> </p>
    </s:if>
    <s:else>
    <p> <h5>设定岗位：<strong>${examBaseConfig.duty.organization.path}/${examBaseConfig.duty.dutyName}</strong></h5> </p>
    </s:else>
    <div id="demo" class="clearfix">
        <section class="portlet leading">
            <header>
                <h6>定量、定性考核比率：<a href="#">总额必须为100%</a></h6>
            </header>

            <section>
                <table class="full">
                    <tbody>
                    <tr>
                        <td style="width:20%">定性比率</td>
                        <td style="width:55%"><div id="progress1" class="progress"><span style="width: 0%;"><b>0%</b></span></div></td>
                        <td style="width:25%" class="ar"><input type="text" style="width:30%" id="percentageQualitative" name="examBaseConfig.percentageQualitative" onblur="check_percentage(this, '1')" value="${examBaseConfig.percentageQualitative}"> % </td>
                    </tr>

                    <tr>
                        <td>定量比率</td>
                        <td><div id="progress2" class="progress"><span style="width: 0%;"><b>0%</b></span></div></td>
                        <td class="ar"><input type="text" style="width:30%" id="percentageQuantitative" name="examBaseConfig.percentageQuantitative" onblur="check_percentage(this, '2')" value="${examBaseConfig.percentageQuantitative}"> % </td>
                    </tr>

                    <tr>
                        <td>完成百分比</td>
                        <td><div class="progress"><span style="width: 100%;"><b>100%</b></span></div></td>
                        <td class="ar">100%</td>
                    </tr>
                    </tbody>
                </table>
            </section>
        </section>
    </div>

    <div id="demo2" class="clearfix">
        <section class="portlet leading">
            <header>
                <h6>绩效考核在职务绩效奖金中的占比：<a href="#">比率自行设定，但不可超过100%</a></h6>
            </header>
            <section>
                <table class="full">
                    <tbody>
                    <tr>
                        <td style="width:20%">比率</td>
                        <td style="width:55%"><div id="progress3" class="progress"><span style="width: 0%;"><b>0%</b></span></div></td>
                        <td style="width:25%" class="ar"><input type="text" style="width:30%" id="percentagePerformance" name="examBaseConfig.percentagePerformance" onblur="check_percentage(this, '3')" value="${examBaseConfig.percentagePerformance}"> % </td>
                    </tr>
                    </tbody>
                </table>
            </section>
        </section>
    </div>

    <div id="demo3" class="clearfix">
        <section class="portlet leading">
            <header>
                <h6>设定考核周期：<a href="#"></a></h6>
            </header>

            <section>
                <table class="full">
                    <tbody>
                    <tr>
                        <td ><input id="period_monthly" name="periodType" type="radio" value="monthly" /> <label for="period_monthly">月度</label></td>
                        <td ><input id="period_bimonthly" name="periodType" type="radio" value="bimonthly" /> <label for="period_bimonthly">双月</label></td>
                        <td ><input id="period_season" name="periodType" type="radio" value="season" /> <label for="period_season">季度</label></td>
                        <td ><input id="period_semiyearly" name="periodType" type="radio" value="semiyearly" /> <label for="period_semiyearly">半年</label></td>
                        <td ><input id="period_annually" name="periodType" type="radio" value="annually" /> <label for="period_annually">一年</label></td>
                        <td style="width:25%" class="ar">&nbsp;</td>
                    </tr>
                    </tbody>
                </table>
            </section>
        </section>

        <section class="portlet leading">
            <header>
                <h6>设定考核周期计算方式：<a href="#"></a></h6>
            </header>

            <section>
                <table class="full">
                    <tbody>
                    <tr>
                        <td ><input id="periodMode1" name="examBaseConfig.periodMode" type="radio" value="0" /> <label for="periodMode1">自然月</label></td>
                        <td ><span class="ar" style="width:25%"> <input id="periodMode2" name="examBaseConfig.periodMode" type="radio" value="1"/> <label for="periodMode2">周期起始日</label>
                            <select name="select" id="period_select">
                                <s:iterator begin="2" end="28" var="period">
                                    <option value="${period}">${period}</option>
                                </s:iterator>
                            </select> </span>
                        </td>
                        <td >&nbsp;</td>
                        <td >&nbsp;</td>
                        <td >&nbsp;</td>
                        <td style="width:25%" class="ar">&nbsp;</td>
                    </tr>
                    </tbody>
                </table>
            </section>
        </section>
    </div>

    <div class="tabs side grid_12 leading">

        <div class="clear"></div>
        <div class="grid_12">
            <div class="form-action clearfix">
                <p>
                    <a href="javascript:void(0)" onclick="checkForm()" class="button"><span class="icon" style='background:url(${ctx}/images/img/${examBaseConfig.id == null || batchType == "create" ? "add.png" : "page_edit.png"})'>&nbsp;</span>${examBaseConfig.id == null ? "添加" : "修改"}</a>
                    <a href="#exam/base_config_main.xhtml" class="button"><span class="icon" style="background:url(${ctx}/images/img/arrow_undo.png)">&nbsp;</span>返回</a>
                </p>
            </div>
        </div>
    </div>
</div>

<input name="examBaseConfig.periodType" id="periodType_input" type="hidden">
<input name="examBaseConfig.duty.id" value="${examBaseConfig.duty.id}" type="hidden">
<input name="examBaseConfig.id" value="${examBaseConfig.id}" type="hidden">
<input name="batchType" value="${batchType}" type="hidden">
<input name="batchIds" value="${batchIds}" type="hidden">
</form>
</div>
</div>
<div class="clear"></div>

<script type="text/javascript" src="${ctx}/js/global_util.js"></script>
<script type="text/javascript">
    function check_percentage(obj, type){
        var p = $(obj).attr("value");
        if(isNaN(p)){
            alert("请正确填写百分比");
            $(obj).attr("value", "");
            return;
        }
        if(p > 100 || p < 0){
            alert("请输入0~100之间的数")
            $(obj).attr("value", "");
            return;
        }

        var p2 = 100 - p;
        if(type == "1"){
            $("#percentageQuantitative").attr("value", p2);
            $("#progress1").html('<span style="width: '+p+'%;"><b>'+p+'%</b></span>');
            $("#progress2").html('<span style="width: '+p2+'%;"><b>'+p2+'%</b></span>');
        }else if(type == '2'){
            $("#percentageQualitative").attr("value", p2);
            $("#progress1").html('<span style="width: '+p2+'%;"><b>'+p2+'%</b></span>');
            $("#progress2").html('<span style="width: '+p+'%;"><b>'+p+'%</b></span>');
        }else if(type == '3'){
            $("#progress3").html('<span style="width: '+p+'%;"><b>'+p+'%</b></span>');
        }
    }

    function checkForm(){
        var p1 = $("#percentageQualitative").val();
        if(checkNull(p1) || isNaN(p1) || p1 > 100 || p1 < 0){
            alert("请正确填写定性百分比");
            return;
        }
        var p2 = $("#percentageQuantitative").val();
        if(checkNull(p2) || isNaN(p2) || p2 > 100 || p2 < 0){
            alert("请正确填写定量百分比");
            return;
        }
        var p3 = $("#percentagePerformance").val();
        if(checkNull(p3) || isNaN(p3) || p3 > 100 || p3 < 0){
            alert("请正确填写绩效考核在职务绩效奖金中所占百分比");
            return;
        }

        var s = 0;
        $("input[type='radio'][name='periodType']").each(function() {
            if ($(this).parent(".checked").length == 1) {
                $(this).attr("checked", true);
                //return false; //退出each(相当于break, return true相当于continue)
            }else{
                $(this).attr("checked", false);
                s++;
            }
        });
        if(s == 5){
            alert("请设定考核周期");
            return;
        }
        var periodType_value = $("input[type='radio'][name='periodType'][checked]").val();
        $("#periodType_input").val(periodType_value);

        s = 0;
        $("input[type='radio'][name='examBaseConfig.periodMode']").each(function() {
            if ($(this).parent(".checked").length == 1) {
                $(this).attr("checked", true);
                //return false; //退出each(相当于break, return true相当于continue)
            }else{
                $(this).attr("checked", false);
                s++;
            }
        });
        if(s == 2){
            alert("请设定考核周期计算方式")
            return;
        }
        var v = $("#period_select").prev("span").html();
        $("#periodMode2").val(v);

        var url = "${ctx}/exam/base_config_create.xhtml";
        if("${batchType}" == "create" || "${batchType}" == "edit"){
            url = "${ctx}/exam/base_config_batch_create.xhtml";
        }
        $.ajax(url, {
            type:"POST",
            data:$("#post_form").serialize(),
            dataType:"html",
            cache:false,
            success:function(a) {
                return pageDownloaded(a, url)
            },
            complete:function(b) {
            }
        });
    }

    $(function(){
        var configId = "${examBaseConfig.id}";
        if(configId > 0){
            init();
        }
    });
    function init(){
        var p = "${examBaseConfig.percentageQualitative}";
        var p2 = "${examBaseConfig.percentageQuantitative}";
        var p3 = "${examBaseConfig.percentagePerformance}";
        $("#progress1").html('<span style="width: '+p+'%;"><b>'+p+'%</b></span>');
        $("#progress2").html('<span style="width: '+p2+'%;"><b>'+p2+'%</b></span>');
        $("#progress3").html('<span style="width: '+p3+'%;"><b>'+p3+'%</b></span>');

        var periodType = "${examBaseConfig.periodType}";
        $("#period_"+periodType).attr("checked", true);

        var periodMode = "${examBaseConfig.periodMode}";
        if(periodMode == 0){
            $("#periodMode1").attr("checked", true);
        }else{
            $("#periodMode2").attr("checked", true);
            $("#period_select").val(periodMode);
        }
    }
</script>